<template>
    <van-nav-bar title="重置密码" left-text="返回" right-text="确认重置" left-arrow @click-left="onClickLeft"
        @click-right="onClickRight" />
    <p class="text">请设置密码。你可以用绑定的账号+密码登录</p>
    <div class="input">
        <van-cell-group inset>
            <van-field label="手机号:" :model-value="phone" disabled />
        </van-cell-group>
        <van-cell-group inset>
            <van-field v-model="original_pwd" label="原密码" placeholder="请输入原密码" @blur="original_password()" />
        </van-cell-group>
        <van-cell-group inset>
            <van-field v-model="new_pwd" label="新密码" placeholder="请输入新密码" />
        </van-cell-group>
        <van-cell-group inset>
            <van-field v-model="confirm_pwd" label="确认密码" placeholder="请再次输入新密码" />
        </van-cell-group>
        <p class="text">密码必须是8-16位的英文字母、数字、字符组合（不能是纯数字）</p>
    </div>
</template>
<script setup>
import { ref, reactive } from 'vue';
import http from '../http';
import router from '@/router';
import { useUserStore } from '../stores/counter';

const userStore = useUserStore();
const onClickLeft = () => history.back();

const phone = userStore.phone;

const original_pwd = ref('');
const new_pwd = ref('');
const confirm_pwd = ref('');

const original_password = () => {
    http.post('escort/login/', {
        phone: userStore.phone,
        password: original_pwd.value
    }).then(res => {
        if (res.data.code == 200) {
            alert('原密码正确')
        } else {
            alert('原密码错误', res.data.msg);
        }
    })
}

const onClickRight = () => {
    if (new_pwd.value == confirm_pwd.value) {
        http.post('/escort/changepwd/', {
            phone: userStore.phone,
            new_pwd: new_pwd.value
        }).then(res => {
            if (res.data.code == 200) {
                alert('密码修改成功');
                router.push('/');
            } else {
                alert('密码修改失败', res.data.msg);
                console.log(res.data);

            }
        })
    } else {
        alert('密码不一致，请确认密码')
    }
}

</script>
<style scoped>
.text {
    font-size: 12px;
    text-align: center;
    color: rgb(129, 129, 129);
}

.input {
    padding: 0 20px;
    margin-top: 20px;
}
</style>